<template>
  <div id="table">
    <div id="header">
      <el-button type="primary" size="small" @click="handleClick(null,0)">新增</el-button>
<!--      <div style="width:16%">-->
<!--        &lt;!&ndash; <el-input placeholder="请输入内容" v-model="input2" class="input-with-select"> &ndash;&gt;-->
<!--          <el-select v-model="select" slot="prepend" placeholder="请选择查询类型">-->
<!--&lt;!&ndash;            <el-option label="用户id" value="1"></el-option>&ndash;&gt;-->
<!--            <el-option label="姓名" value="2"></el-option>-->
<!--            <el-option label="用户性别" value="3"></el-option>-->
<!--            <el-option label="用户年龄" value="4"></el-option>-->
<!--            <el-option label="出生日期" value="5"></el-option>-->
<!--            <el-option label="联系方式" value="6"></el-option>-->
<!--            <el-option label="用户状态" value="7"></el-option>-->
<!--          </el-select>-->
<!--      </div>-->
<!--      <div style="width:15%;padding-right: 10px">-->
<!--        <el-input v-model="input" placeholder="请输入内容"></el-input>-->
<!--      </div>-->
      <el-button type="primary" size="small" @click="handleClick(null,4)">查询信息</el-button>
    </div>
    <div id="main">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        show-overflow-tooltip>
      </el-table-column>
<!--      <el-table-column-->
<!--        label="用户id"-->
<!--        show-overflow-tooltip>-->
<!--        <template slot-scope="scope">{{ scope.row.u_id }}</template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="uName"
        label="用户姓名"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="uSex"
        label="用户性别"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="uAge"
        label="用户年龄"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="uBirthDate"
        label="出生日期"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="uPhone"
        label="联系方式"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="uState"
        label="用户状态"
        show-overflow-tooltip>
      </el-table-column>
        <el-table-column
          prop="uCreateTime"
          label="创建时间"
          show-overflow-tooltip>
        </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      show-overflow-tooltip>
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row,1)" type="text" size="mini">删除</el-button>
        <el-button @click="handleClick(scope.row,2)" type="text" size="mini">查看</el-button>
        <el-button @click="handleClick(scope.row,3)" type="text" size="mini">编辑</el-button>
      </template>
    </el-table-column>
    </el-table>
<!--      通用弹出框-->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%" >
        <el-form :model="form">
          <el-form-item label="用户姓名" :label-width="formLabelWidth">
            <el-input v-model="form.uName" autocomplete="off" :disabled="dialogEdit"></el-input>
          </el-form-item>
          <el-form-item label="用户性别" :label-width="formLabelWidth">
            <el-select v-model="form.uSex" placeholder="请选择性别" :disabled="dialogEdit" style="width: 100%" >
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户年龄" :label-width="formLabelWidth">
            <el-input v-model="form.uAge" autocomplete="off" :disabled="dialogEdit"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth">
            <el-input v-model="form.uPhone" autocomplete="off" :disabled="dialogEdit"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-input v-model="form.uBirthDate" autocomplete="off" :disabled="dialogEdit"></el-input>
          </el-form-item>
          <el-form-item label="用户状态" :label-width="formLabelWidth">
            <el-select v-model="form.uState" placeholder="选择后用户状态" :disabled="dialogEdit" style="width: 100%" >
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="创建时间" :label-width="formLabelWidth">-->
<!--            <el-input v-model="form.uCreateTime" autocomplete="off" :disabled="dialogEdit"></el-input>-->
<!--          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false" v-if="title==='查看信息'">确 定</el-button>
          <el-button @click="changeDialogFormVisible(false, 1, null)" v-if="title === '修改信息'">取 消</el-button>
          <el-button type="primary" @click="changeDialogFormVisible(false, 2, form)" v-if="title === '修改信息'">确 定</el-button>
          <el-button @click="changeDialogFormVisible(false, 3, null)" v-if="title === '添加信息'">取 消</el-button>
          <el-button type="primary" @click="changeDialogFormVisible(false, 4, form)" v-if="title === '添加信息'">确 定</el-button>
        </div>

      </el-dialog>
<!--   删除弹出框   -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>是否删除该信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteBox(1)">取 消</el-button>
          <el-button type="primary" @click="deleteBox(2)">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div id="footer">
      <div class="footer-box">
        <el-button @click="toggleSelection()" style="display: flex;align-items: center">取消全选</el-button>
      </div >
    <!--
        current-page:当前在第几页
        page-sizes：每业显示行数的集合
        page-size：当前每页显示几行
        total：总条数
     -->
      <div class="footer-box">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserTable',
  data () {
    return {
      input: '',
      input1: '',
      input2: '',
      input3: '',
      select: '',
      dataTotal: 1,
      tableData: [], // 存储传递过来的数据
      multipleSelection: [],
      page: 1, // 设置当前页面的位置
      size: 5, // 设置当前页面显示的条数
      currentPage: 1, // 当前第几页
      dialogFormVisible: false, // 设置弹窗是否显示
      formLabelWidth: '120px', // 设置弹框的宽度
      title: '', // 设置弹框的名称
      dialogEdit: false, // 设置弹框是否可以编辑
      form: {
        u_id: null, // 设置用户id
        uName: null, // 设置用户的名称
        uSex: null, // 设置用户的性别
        uPhone: null, // 设置联系方式
        uAge: null, // 设置用户的年龄
        uBirthDate: null, // 用户的出生日期
        uState: null, // 设置用户的状态
        uCreateTime: null // 设置用户的创建时间
      }, // 弹框数据
      dialogVisible: false, // 设置删除框是否显示
      dialogValue: null // 设置将要删除的数值
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 改变页面数据条数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.getData()
    },
    // 改变当前页面的页码
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getData()
    },
    // 业务判断
    handleClick (row, num) {
      // 点击按钮后执行的代码
      if (num === 0) {
        console.log('添加业务')
        this.changeDialogInfo('添加信息', false, null)
      } else if (num === 1) { // 已经完成
        console.log('删除业务')
        this.deleteUser(row)
      } else if (num === 2) { // 已经完成
        console.log('查看业务')
        this.changeDialogInfo('查看信息', true, row)
      } else if (num === 3) {
        console.log('编辑业务')
        this.changeDialogInfo('修改信息', false, row) // 修改信息基础配置
      } else {
        console.log('查询业务')
      }
      this.getData()
    },
    // 打开弹框，改变弹框里面的信息
    changeDialogInfo (title, edit, obj) {
      if (title !== '添加信息') {
        this.form.u_id = obj.u_id
        this.form.uName = obj.uName
        this.form.uSex = obj.uSex + ''
        this.form.uPhone = obj.uPhone
        this.form.uAge = obj.uAge
        this.form.uBirthDate = obj.uBirthDate
        this.form.uState = obj.uState + ''
        this.form.uCreateTime = obj.uCreateTime
      } else {
        this.form.u_id = ''
        this.form.uName = ''
        this.form.uSex = ''
        this.form.uPhone = ''
        this.form.uAge = ''
        this.form.uBirthDate = ''
        this.form.uState = ''
        this.form.uCreateTime = ''
      }
      this.title = title // 设置信息编辑的标题
      this.dialogEdit = edit // 设置弹框是否可以编辑，用于区分编辑和查看模式
      this.dialogFormVisible = true // 设置弹框是否可见
    },
    // 查询列表信息
    getData () {
      this.$axios.get('/selectList2', {
        params: {
          page: this.page,
          size: this.size
        }
      }).then(response => {
        console.log(response)
        console.log(response)
        this.tableData = response.data.userList
        this.dataTotal = response.data.count
      }).catch(err => {
        console.log(err)
      })
    },
    // 弹框提示
    dialogTip (obj, title) {
      const h = this.$createElement
      this.$notify({
        title: '消息提示',
        message: h('i', {style: 'color: teal'}, `用户：${obj.uName}[${obj.u_id}],${title}`),
        duration: 1500
      })
      this.getData() // 修改结束后获取数据
    },
    // 设置弹出框的是否执行业务
    changeDialogFormVisible (Info, num, obj) {
      this.dialogFormVisible = Info
      if (num === 1) {
        const h = this.$createElement
        this.$notify({
          title: '消息提示',
          message: h('i', {style: 'color: teal'}, `取消修改用户操作`),
          duration: 1500
        })
      } else if (num === 2) {
        this.updateUser(obj) // 修改信息
      } else if (num === 3) {
        const h = this.$createElement
        this.$notify({
          title: '消息提示',
          message: h('i', {style: 'color: teal'}, `取消新增用户操作`),
          duration: 1500
        })
      } else {
        this.insertUser(obj)
      }
    },
    // 删除信息
    deleteUser (obj) {
      this.dialogVisible = true
      this.dialogValue = obj.u_id
      // this.$axios.get('/deleteUser', {
      //   params: {
      //     uid: obj.u_id
      //   }
      // }).then(response => {
      //   if (response.data === '删除成功') {
      //     this.dialogTip(obj, '信息删除成功')
      //     this.getData() // 修改结束后获取数据
      //   }
      // }).catch(err => {
      //   console.log(err)
      // })
    },
    // 修改信息
    updateUser (obj) {
      this.$axios.get('/updateUser', {
        params: {
          u_id: obj.u_id,
          uName: obj.uName,
          uSex: obj.uSex,
          uAge: obj.uAge,
          uBirthDate: obj.uBirthDate,
          uPhone: obj.uPhone,
          uState: obj.uState
        }
      }).then(response => {
        if (response.data === '修改成功') {
          this.dialogTip(obj, '信息修改成功')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 新增信息
    insertUser (obj) {
      this.$axios.get('/insertUser', {
        params: {
          u_id: null,
          uName: obj.uName,
          uSex: obj.uSex,
          uAge: obj.uAge,
          uBirthDate: obj.uBirthDate,
          uPhone: obj.uPhone,
          uState: obj.uState
        }
      }).then(response => {
        if (response.data === '添加成功') {
          this.dialogTip(obj, '信息添加成功')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    deleteBox (num) {
      this.dialogVisible = false
      if (num === 1) {
        const h = this.$createElement
        this.$notify({
          title: '消息提示',
          message: h('i', {style: 'color: teal'}, `取消删除用户操作`),
          duration: 1500
        })
      } else {
        this.$axios.get('/deleteUser', {
          params: {
            uid: this.dialogValue
          }
        }).then(response => {
          if (response.data === '删除成功') {
            const h = this.$createElement
            this.$notify({
              title: '消息提示',
              message: h('i', {style: 'color: teal'}, `${this.dialogValue},删除成功`),
              duration: 2000
            })
            this.getData() // 修改结束后获取数据
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  },
  mounted () {
    // 挂载信息
    this.getData()
  }
}
</script>

<style scoped>
#table{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
#header{
  width: 100%;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
}
#main{
  width: 100%;
  height: 84%;
  box-sizing: border-box;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0 20px;

}
#footer{
  width: 100%;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}
.footer-box{
  height: 50%;
  display: flex;
  align-content: center;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
.cell,.el-tooltip{
  text-align: center !important;
}
</style>
